<template>
	<div id="add-space-view">
		<h2 style="margin-bottom: 16px">{{ route.query?.id ? '编辑' : '创建' }} {{ SPACE_TYPE_MAP[spaceType] }}</h2>

		<!-- 空间信息表单 -->
		<a-form layout="vertical" name="spaceForm" :model="spaceForm" @finish="handleSubmit">
			<a-form-item name="spaceName" label="空间名称">
				<a-input v-model:value="spaceForm.spaceName" placeholder="请输入空间名称" allow-clear />
			</a-form-item>
			<a-form-item name="spaceLevel" label="空间等级">
				<a-select
					v-model:value="spaceForm.spaceLevel"
					style="min-width: 180px"
					placeholder="请选择空间等级"
					:options="SPACE_LEVEL_OPTIONS"
					allow-clear
				/>
			</a-form-item>

			<a-form-item>
				<div>
					<a-button type="primary" html-type="submit" :loading="loading" style="width: 100%">创建</a-button>
				</div>
			</a-form-item>
		</a-form>
		<!-- 空间等级介绍 -->
		<a-card title="空间等级介绍">
			<a-typography>
				* 目前仅支持开通普通版，如需升级空间，请联系
				<a href="https://gitee.com/it-heima-ht/projects" target="_blank">程序员Tao</a>。
			</a-typography>
			<a-typography v-for="spaceLevel in spaceLevelList" :key="spaceLevel.value">
				* {{ spaceLevel.text }}：大小 {{ formatSize(spaceLevel.maxSize) }}， 数量 {{ spaceLevel.maxCount }}
			</a-typography>
		</a-card>
	</div>
</template>

<script setup lang="ts">
import {
	addSpaceUsingPost,
	updateSpaceUsingPost,
	getSpaceVoByIdUsingGet,
	listSpaceLevelUsingGet,
} from '@/api/spaceController'
import { message } from 'ant-design-vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { SPACE_LEVEL_OPTIONS, SPACE_TYPE_ENUM, SPACE_TYPE_MAP } from '@/constants/space'
import { formatSize } from '@/utils/index'
import { useTeamSpaceStore } from '@/stores/useTeamSpaceStore'

const router = useRouter()
const teamSpaceStore = useTeamSpaceStore()

const space = ref<API.SpaceVO>()
const spaceForm = reactive<any>({}) // 使用 any 类型来避免类型冲突
const loading = ref(false)

const route = useRoute()
const spaceLevelList = ref<API.SpaceLevel[]>([])

// 空间类别，默认为私有空间
const spaceType: any = computed(() => {
	if (route.query?.type) {
		return route.query.type
	} else {
		return SPACE_TYPE_ENUM.PRIVATE
	}
})

const fetchSpaceLevelList = async () => {
	// 获取空间等级列表
	const res = await listSpaceLevelUsingGet()
	if (res.data.code === 0 && res.data.data) {
		spaceLevelList.value = res.data.data
	} else {
		message.error('获取空间等级列表失败')
	}
}

// 提交表单
const handleSubmit = async (values: any) => {
	const spaceId = space.value?.id
	loading.value = true
	let res
	// 更新
	if (spaceId) {
		res = await updateSpaceUsingPost({
			id: spaceId,
			...spaceForm,
		})
	} else {
		// 创建
		res = await addSpaceUsingPost({
			...spaceForm,
			spaceType: spaceType.value,
		})
	}

	// 操作成功
	if (res.data.code === 0 && res.data.data) {
		// 先更新用户信息，再显示成功消息和跳转
		message.success('操作成功！')

		// 如果是创建团队空间，刷新团队空间列表
		if (!spaceId && spaceType.value === SPACE_TYPE_ENUM.TEAM) {
			await teamSpaceStore.refreshTeamSpaceList()
		}

		// console.log('操作成功，跳转到空间详情页', res.data)
		router.push({
			path: `/space/${res.data.data}`,
		})
	} else {
		// 处理后端返回的错误
		message.error('操作失败：' + res.data.message)
	}
	loading.value = false
}

// 获取老数据
const getOldSpace = async () => {
	// 获取到 id
	const id = route.query?.id
	if (id) {
		const res = await getSpaceVoByIdUsingGet({ id: id as any })
		if (res.data.code === 0 && res.data.data) {
			const data = res.data.data
			space.value = data
			// 填充表单数据
			spaceForm.spaceName = data.spaceName
			spaceForm.spaceLevel = data.spaceLevel
		}
	}
}

onMounted(() => {
	fetchSpaceLevelList()
	getOldSpace()
})
</script>

<style scoped lang="scss">
#add-space-view {
	max-width: 720px;
	margin: 0 auto;

	// 表单项间距优化
	.ant-form-item {
		margin-bottom: 24px;
	}

	// 按钮样式优化
	.ant-btn-primary {
		height: 48px;
		font-size: 16px;
		font-weight: 500;
	}
}
</style>
